<template>
    <div class="login">
        <div class="container">
            <!-- 头像 -->
            <div class="avatar">
                <img src="../assets/avatar.jpg" alt="">
            </div>
            <!-- 输入框
            label-width="80px"  设置表单元素左边区域的宽度
            model: 绑定表单数据对象 ---- 对表单数据进行校验
             -->
            <el-form ref="form" :model="form" :rules="rules" >
                <!-- <el-form-item label="活动名称">
                    label 设置表单元素左边区域内容 -->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-key" v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <!-- 按钮 -->
                    <el-button type="primary" class="login-btn" @click="loginFn">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { login } from "@/api/user.js"
export default {
    data(){
        return {
            form: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    // required true表示必填值，message 错误提示语，trigger 触发校验的时机，blur表示失去焦点的时候触发校验
                    {required: true, message: "请输入用户名", trigger: "blur"},
                    { min: 5, max: 11,message: "长度5到11位字符", trigger: "blur" }
                ],
                password: [
                    {required: true,message: "请输入密码", trigger: "blur"},
                    { min: 3, max: 16, message: "长度3到16位字符", trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        loginFn(){
            this.$refs.form.validate(val=>{
                // console.log(54,val);
                if(val){
                    // console.log("校验通过");
                    login(this.form).then(res=>{
                        // console.log(59,res);
                        if(res.data.message == "登录成功"){
                            localStorage.setItem("72-backend-token",res.data.data.token);
                            localStorage.setItem("72-backend-userId",res.data.data.user.id);
                            this.$message({
                                type: "success",
                                message: res.data.message
                            })
                            // 跳转到首页
                            this.$router.push("/index/home")
                        }else{
                            this.$message({
                                type: "error",
                                message: res.data.message
                            })
                        }
                    })
                }else{
                    console.log("校验不通过");
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;
  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>